<template>
	<view class="customer-service-container">
		<view class="header">
			<text class="title">联系客服</text>
			<text class="subtitle">如有问题，请随时联系我们</text>
		</view>
		<view class="notification-section">
			<view class="section-title">
				<uni-icons type="notification" size="18" :color="bgColor"></uni-icons>
				<text class="title-text">系统通知</text>
			</view>
			<view class="notification-content">
				<text class="notification-text">{{link.notice}}</text>
			</view>
		</view>

		<view class="contact-section">
			<view class="section-title">
				<uni-icons type="chat" size="18" :color="bgColor"></uni-icons>
				<text class="title-text">联系方式</text>
			</view>
			<view class="contact-item">
				<view class="contact-left">
					<uni-icons type="qq" size="20" :color="bgColor"></uni-icons>
					<text class="contact-type">QQ客服</text>
				</view>
				<view class="contact-right">
					<text class="contact-value">{{link.qq}}</text>
					<button class="copy-btn" @click="copyContact(link.qq)">复制</button>
				</view>
			</view>

			<view class="contact-item">
				<view class="contact-left">
					<uni-icons type="weixin" size="20" :color="bgColor"></uni-icons>
					<text class="contact-type">微信</text>
				</view>
				<view class="contact-right">
					<text class="contact-value">{{link.wx}}</text>
					<button class="copy-btn" @click="copyContact(link.wx)">复制</button>
				</view>
			</view>


		</view>

		<!-- 底部说明 -->
		<view class="footer">
			<text class="footer-text">我们将在收到消息后尽快回复您</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		useAppStore
	} from '@/store/app'
	let link = ref({})
	let bgColor = ref('#3176ff')
	onLoad(() => {
		link.value = useAppStore().$state.link
	})
	const copyContact = (content) => {
		uni.setClipboardData({
			data: content,
			success: () => {
				uni.showToast({
					title: '已复制到剪贴板',
					icon: 'success'
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.customer-service-container {
		min-height: 100vh;
		background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
		padding: 30rpx;
	}

	.header {
		text-align: center;
		margin-bottom: 50rpx;
		padding: 40rpx 0;

		.title {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 15rpx;
		}

		.subtitle {
			font-size: 28rpx;
			color: #666;
		}
	}

	.notification-section,
	.contact-section {
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.title-text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-left: 15rpx;
		}
	}

	.notification-content {
		.notification-text {
			display: block;
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
			margin-bottom: 15rpx;
		}
	}

	.contact-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;

		&:last-child {
			border-bottom: none;
		}

		.contact-left {
			display: flex;
			align-items: center;

			.contact-type {
				font-size: 30rpx;
				color: #333;
				margin-left: 20rpx;
			}
		}

		.contact-right {
			display: flex;
			align-items: center;

			.contact-value {
				font-size: 28rpx;
				color: $theme-color;
				margin-right: 20rpx;
			}

			.copy-btn,
			.service-btn {
				background: $theme-color;
				color: #fff;
				border: none;
				border-radius: 10rpx;
				padding: 12rpx 24rpx;
				font-size: 24rpx;

				&:active {
					background: #1e8c6e;
				}
			}
		}
	}

	.online-service {
		background: #f8fffd;
		border-radius: 15rpx;
		padding: 30rpx;
		margin: 20rpx -10rpx -10rpx;
		border: 1rpx solid #e0f2ec;
	}

	.footer {
		text-align: center;
		padding: 40rpx 0;

		.footer-text {
			font-size: 26rpx;
			color: #999;
		}
	}
</style>